import classNames from "classnames";
import Button, { IButtonProps } from "../Button";
import styles from './style.module.less';

export interface ITopBarItem extends Omit<IButtonProps, 'children'> {
  label?: React.ReactNode;
}
export interface ITopBarProps extends React.HTMLAttributes<HTMLDivElement> {
  items?: ITopBarItem[]
}

export function builtInItemRender(item: ITopBarItem, idx: number, items: ITopBarItem[]) {
  const { label, ...btn_props } = item
  return <Button size='s' key={idx} {...btn_props}>{label}</Button>
}

export default function TopBar(props: ITopBarProps) {
  const { className, items, ...remainProps } = props
  return (
    <div className={classNames(styles.top_bar, className)} {...remainProps}>
      {items?.map(builtInItemRender)}
    </div>
  )
}